<template>
  <div id="app">
     <transition name="rotate-fall">
            <router-view class="app-router-view" />
      </transition>
      <theme-picker v-show="false" @change="themeChange" />
  </div>
</template>
<script>
import ThemePicker from '@/components/ThemePicker';
export default {
    components: { ThemePicker },
    methods: {
        themeChange(val) {
            console.log('-' + val.trim() + '-')
            document.documentElement.style.setProperty("--theme-color", val);
        }
    }
}
   
</script>

<style lang="scss" scoped>
   .app-router-view{
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      overflow: hidden;
      backface-visibility: hidden;
      visibility: visible;
   }
</style>
